<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>交底书查新</title>
    <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <style>
        body {
            font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
        }
        .gradient-bg {
            background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
        }
        .card-hover:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
        }
        .tab-active {
            color: #0284c7;
            border-bottom: 2px solid #0284c7;
        }
        .patent-item:hover {
            background-color: #f0f9ff;
        }
        .patent-selected {
            background-color: #e0f2fe;
            border-left: 3px solid #0284c7;
        }
        .resizer {
            width: 5px;
            cursor: col-resize;
            background-color: #e5e7eb;
        }
        .resizer:hover {
            background-color: #d1d5db;
        }
        .hide-scrollbar::-webkit-scrollbar {
            display: none;
        }
        .hide-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        
        /* 滚动条样式 - 完全隐藏 */
        .scrollbar-thin::-webkit-scrollbar {
            display: none;
        }
        .scrollbar-thin {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        
        /* 全局滚动条样式 - 适用于所有元素 */
        ::-webkit-scrollbar {
            width: 4px;
            height: 4px;
        }
        ::-webkit-scrollbar-track {
            background: transparent;
        }
        ::-webkit-scrollbar-thumb {
            background: rgba(203, 213, 225, 0.5);
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: rgba(148, 163, 184, 0.5);
        }
    </style>
</head>
<body class="bg-gray-50 text-black">
    <div class="flex flex-col h-screen overflow-hidden">             
        <!-- 主体内容区 -->
        <div class="flex-1 flex overflow-hidden">
            <!-- 左侧查新区 -->
            <div id="searchSection" class="flex-1 flex flex-col overflow-hidden">
                <!-- 交底书信息 -->
                <div class="p-4 border-b bg-white">
                    <div class="flex justify-between items-center">
                        <div>
                            <h2 class="text-xl font-medium">查新检索：一种基于深度学习的智能语音识别系统</h2>
                            <p class="text-sm text-gray-500 mt-1">创建时间：2023-11-15</p>
                        </div>
                    </div>
                </div>
                
                <!-- 检索区 -->
                <div class="p-3 bg-white border-b">
                    <div class="flex space-x-4 mb-2">
                        <button id="semanticSearchTab" class="tab-active px-4 py-1.5 text-sm font-medium">智能检索</button>
                        <button id="expertSearchTab" class="px-4 py-1.5 text-sm font-medium text-gray-500">专家检索</button>
                        <button id="priorArtSearchTab" class="px-4 py-1.5 text-sm font-medium text-gray-500">前案检索</button>
                    </div>

                    <!-- 语义检索 -->
                    <div id="semanticSearchPanel">
                        <div class="mb-2 pl-3 pr-3 mt-1">
                            <div class="flex space-x-1">
                                <button class="p-1.5 border text-xs border-gray-300 rounded-lg text-gray-600 hover:bg-gray-100 transition duration-200 flex items-center justify-center">
                                    <i class="ri-earth-fill mr-2 text-blue-500 hover:text-blue-700"></i> 全球
                                </button>
                                <div class="relative flex-1">
                                    <input type="text" class="w-full p-2.5 pr-10 border border-gray-300 rounded-lg text-xs focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent" placeholder="请输入技术问题、技术方案和技术效果进行智能检索">
                                    <button class="absolute right-0 top-0 h-full px-3 text-blue-600 rounded-r-lg text-xs font-medium hover:text-blue-700 transition duration-200 flex items-center justify-center">
                                        <i class="ri-search-line text-base"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 专家检索 -->
                    <div id="expertSearchPanel" class="hidden">
                        <div class="mb-2 pl-3 pr-3 mt-1">
                            <div class="flex space-x-1">
                                <button class="p-1.5 border text-xs border-gray-300 rounded-lg text-gray-600 hover:bg-gray-100 transition duration-200 flex items-center justify-center">
                                    <i class="ri-earth-fill mr-2 text-blue-500 hover:text-blue-700"></i> 全球
                                </button>
                                <div class="relative flex-1">
                                    <input type="text" class="w-full p-2.5 pr-10 border border-gray-300 rounded-lg text-xs focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent" placeholder="请输入检索式，例如：(语音识别 AND 深度学习) OR 神经网络">
                                    <button class="absolute right-0 top-0 h-full px-3 text-blue-600 rounded-r-lg text-xs font-medium hover:text-blue-700 transition duration-200 flex items-center justify-center">
                                        <i class="ri-search-line text-base"></i>
                                    </button>
                                </div>
                                <button id="filterBtn" class="p-1.5 mr-2 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-100 transition duration-200 flex items-center justify-center">
                                    <i class="ri-filter-line text-blue-600 hover:text-blue-700"></i>
                                </button>
                            </div>
                        </div>
                        
                        <!-- 筛选弹出框 (初始隐藏) -->
                        <div id="filterModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
                            <div class="bg-white rounded-lg shadow-lg max-w-4xl w-full mx-4">
                                <div class="flex justify-between items-center p-5 border-b">
                                    <h3 class="text-xl font-medium">二次检索</h3>
                                    <button id="closeFilterBtn" class="text-gray-500 hover:text-gray-700">
                                        <i class="ri-close-line text-2xl"></i>
                                    </button>
                                </div>
                                <div class="p-4">
                                    <img src="filter.png" alt="二次检索" class="w-full rounded-lg">
                                </div>
                                <div class="flex justify-end p-5 border-t">                   
                                    <button id="applyFilterBtn" class="px-6 py-2.5 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition duration-200">
                                        检索
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 专利列表 -->
                <div class="flex-1 overflow-y-auto p-4 space-y-3 scrollbar-thin">
                    <!-- 专利项 -->
                    <div class="patent-item bg-white rounded-lg shadow-sm p-4 transition duration-200 cursor-pointer">
                        <div class="flex items-start">
                            <div class="mr-3 pt-1">
                                <input type="checkbox" class="patent-checkbox w-4 h-4 text-primary-600 rounded border-gray-300 focus:ring-primary-500" title="勾选现有技术进行比对">
                            </div>
                            <div class="flex-1">
                                <div class="flex items-center justify-between mb-1">
                                    <h3 class="text-base font-medium">基于深度学习的多方言语音识别方法及系统</h3>
                                    <span class="text-xs font-medium bg-blue-100 text-blue-800 py-0.5 px-2 rounded-full">相似度: <span class="text-blue-600 font-bold">92%</span></span>
                                </div>
                                <div class="flex flex-wrap text-xs text-gray-500 mb-2">
                                    <span class="mr-4">公开号：CN113344556A</span>
                                    <span class="mr-4">公开日：2021-09-21</span>
                                    <span>法律状态：有效</span>
                                </div>
                                <div class="flex flex-wrap text-xs text-gray-500 mb-2">
                                    <span class="mr-4">专利权人：某科技有限公司</span>
                                    <span>发明人：吴林坤</span>
                                </div>
                                <p class="text-sm text-gray-700 line-clamp-2">摘要：本发明提供了一种基于深度学习的多方言语音识别方法及系统，通过改进的Transformer模型和迁移学习技术，实现了对多种方言的高精度识别，并通过模型压缩技术提高了处理速度...</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="patent-item bg-white rounded-lg shadow-sm p-4 transition duration-200 cursor-pointer">
                        <div class="flex items-start">
                            <div class="mr-3 pt-1">
                                <input type="checkbox" class="patent-checkbox w-4 h-4 text-primary-600 rounded border-gray-300 focus:ring-primary-500" title="勾选现有技术进行比对">
                            </div>
                            <div class="flex-1">
                                <div class="flex items-center justify-between mb-1">
                                    <h3 class="text-base font-medium">一种噪声环境下的语音识别优化方法</h3>
                                    <span class="text-xs font-medium bg-blue-100 text-blue-800 py-0.5 px-2 rounded-full">相似度: <span class="text-blue-600 font-bold">85%</span></span>
                                </div>
                                <div class="flex flex-wrap text-xs text-gray-500 mb-2">
                                    <span class="mr-4">公开号：CN112233445A</span>
                                    <span class="mr-4">公开日：2021-02-15</span>
                                    <span>法律状态：有效</span>
                                </div>
                                <div class="flex flex-wrap text-xs text-gray-500 mb-2">
                                    <span class="mr-4">专利权人：某通信技术有限公司</span>
                                    <span>发明人：增有权</span>
                                </div>
                                <p class="text-sm text-gray-700 line-clamp-2">摘要：本发明提供了一种噪声环境下的语音识别优化方法，通过多通道麦克风阵列和自适应滤波算法，有效抑制背景噪声，提高了嘈杂环境下的语音识别准确率...</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="patent-item bg-white rounded-lg shadow-sm p-4 transition duration-200 cursor-pointer">
                        <div class="flex items-start">
                            <div class="mr-3 pt-1">
                                <input type="checkbox" class="patent-checkbox w-4 h-4 text-primary-600 rounded border-gray-300 focus:ring-primary-500" title="勾选现有技术进行比对">
                            </div>
                            <div class="flex-1">
                                <div class="flex items-center justify-between mb-1">
                                    <h3 class="text-base font-medium">专业领域术语识别增强系统</h3>
                                    <span class="text-xs font-medium bg-blue-100 text-blue-800 py-0.5 px-2 rounded-full">相似度: <span class="text-blue-600 font-bold">78%</span></span>
                                </div>
                                <div class="flex flex-wrap text-xs text-gray-500 mb-2">
                                    <span class="mr-4">公开号：CN113455667A</span>
                                    <span class="mr-4">公开日：2021-11-25</span>
                                    <span>法律状态：有效</span>
                                </div>
                                <div class="flex flex-wrap text-xs text-gray-500 mb-2">
                                    <span class="mr-4">专利权人：某人工智能研究院</span>
                                    <span>发明人：陈述</span>
                                </div>
                                <p class="text-sm text-gray-700 line-clamp-2">摘要：本发明提供了一种专业领域术语识别增强系统，通过构建领域知识图谱和专业术语库，结合深度学习模型，显著提高了专业领域术语的识别准确率...</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="patent-item bg-white rounded-lg shadow-sm p-4 transition duration-200 cursor-pointer">
                        <div class="flex items-start">
                            <div class="mr-3 pt-1">
                                <input type="checkbox" class="patent-checkbox w-4 h-4 text-primary-600 rounded border-gray-300 focus:ring-primary-500" title="勾选现有技术进行比对">
                            </div>
                            <div class="flex-1">
                                <div class="flex items-center justify-between mb-1">
                                    <h3 class="text-base font-medium">基于知识蒸馏的轻量化语音识别模型</h3>
                                    <span class="text-xs font-medium bg-blue-100 text-blue-800 py-0.5 px-2 rounded-full">相似度: <span class="text-blue-600 font-bold">75%</span></span>
                                </div>
                                <div class="flex flex-wrap text-xs text-gray-500 mb-2">
                                    <span class="mr-4">公开号：CN113566778A</span>
                                    <span class="mr-4">公开日：2021-10-18</span>
                                    <span>法律状态：有效</span>
                                </div>
                                <div class="flex flex-wrap text-xs text-gray-500 mb-2">
                                    <span class="mr-4">专利权人：某移动科技有限公司</span>
                                    <span>发明人：付清源</span>
                                </div>
                                <p class="text-sm text-gray-700 line-clamp-2">摘要：本发明提供了一种基于知识蒸馏的轻量化语音识别模型，通过将大型教师模型的知识迁移到小型学生模型中，并结合模型量化和稀疏化技术，显著提高了模型推理速度...</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 底部操作栏 -->
                <div class="p-4 border-t bg-white">
                    <div class="flex justify-between items-center">
                        <div class="flex items-center">
                            <input type="checkbox" id="selectAll" class="w-4 h-4 text-primary-600 rounded border-gray-300 focus:ring-primary-500 mr-2">
                            <label for="selectAll" class="text-sm">全选</label>
                            <span class="text-sm text-gray-500 ml-4">已选择 <span id="selectedCount">0</span> / 5 项</span>
                        </div>
                        <div class="flex items-center space-x-1">
                            <button id="viewHistoryBtn" class="py-1.5 px-3 bg-white hover:bg-gray-50 text-gray-700 rounded-lg text-sm transition duration-200 flex items-center border border-white shadow-sm">
                                <i class="ri-history-line mr-1"></i> 历史
                            </button>
                            <button id="compareBtn" class="py-1.5 px-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm transition duration-200 flex items-center border border-gray-300 shadow-sm">
                                <i class="ri-file-list-3-line mr-1"></i> 查新比对
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 查新对比弹出窗体 -->
            <!-- <div id="compareModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">

                <iframe src="compare.html" 
                        width="90%" 
                        height="90%" 
                        frameborder="0" 
                        style="border: none; min-height: 600px;">
                </iframe>
            </div> -->

            <!-- 中间分隔线 -->
            <div id="resizer" class="resizer"></div>
            
            <!-- 右侧详情区 -->
            <div id="detailSection" class="w-1/2 flex flex-col bg-white border-l">
                <!-- 详情区标题栏 -->
                <div class="p-4 border-b">
                    <div class="flex justify-between items-center">
                        <h2 class="text-lg font-medium">专利详情</h2>
                    </div>
                </div>
                
                <!-- 详情区内容 -->
                <div class="flex-1 overflow-y-auto p-4 scrollbar-thin">
                    <div id="patentDetail">
                        <div class="mb-6">
                            <img src="detail.png" alt="专利图示" class="w-full rounded-lg shadow-sm mb-4">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 获取DOM元素
            const semanticSearchTab = document.getElementById('semanticSearchTab');
            const expertSearchTab = document.getElementById('expertSearchTab');
            const semanticSearchPanel = document.getElementById('semanticSearchPanel');
            const expertSearchPanel = document.getElementById('expertSearchPanel');
            const priorArtSearchTab = document.getElementById('priorArtSearchTab');
            const patentItems = document.querySelectorAll('.patent-item');
            const patentCheckboxes = document.querySelectorAll('.patent-checkbox');
            const selectAllCheckbox = document.getElementById('selectAll');
            const selectedCountSpan = document.getElementById('selectedCount');
            const compareBtn = document.getElementById('compareBtn');
            const detailSection = document.getElementById('detailSection');
            const patentDetails = document.querySelectorAll('.patent-detail');
            const resizer = document.getElementById('resizer');
            const searchSection = document.getElementById('searchSection');
            const viewHistoryBtn = document.getElementById('viewHistoryBtn');
            
            // 初始化右侧详情区域（默认显示）
            detailSection.classList.remove('hidden');
            
            // 标签页切换
            semanticSearchTab.addEventListener('click', function() {
                semanticSearchTab.classList.add('tab-active');
                semanticSearchPanel.classList.remove('hidden');
                expertSearchTab.classList.remove('tab-active');
                expertSearchPanel.classList.add('hidden');
                expertSearchTab.classList.add('text-gray-500');
                semanticSearchTab.classList.remove('text-gray-500');
                priorArtSearchTab.classList.remove('tab-active');
                priorArtSearchTab.classList.add('text-gray-500');
            });
            
            expertSearchTab.addEventListener('click', function() {
                expertSearchTab.classList.add('tab-active');
                semanticSearchTab.classList.remove('tab-active');
                semanticSearchPanel.classList.add('hidden');
                expertSearchPanel.classList.remove('hidden');
                semanticSearchTab.classList.add('text-gray-500');
                expertSearchTab.classList.remove('text-gray-500');
                priorArtSearchTab.classList.remove('tab-active');
                priorArtSearchTab.classList.add('text-gray-500');
            });

            priorArtSearchTab.addEventListener('click', function() {
                priorArtSearchTab.classList.add('tab-active');
                semanticSearchTab.classList.remove('tab-active');
                semanticSearchPanel.classList.add('hidden');
                expertSearchTab.classList.remove('tab-active');
                expertSearchPanel.classList.add('hidden');
                semanticSearchTab.classList.add('text-gray-500');
                expertSearchTab.classList.add('text-gray-500');
                priorArtSearchTab.classList.remove('text-gray-500');
            })

            // 筛选按钮功能
            const filterBtn = document.getElementById('filterBtn');
            const filterModal = document.getElementById('filterModal');
            const closeFilterBtn = document.getElementById('closeFilterBtn');
            const applyFilterBtn = document.getElementById('applyFilterBtn');
            
            // 显示筛选弹出框
            filterBtn.addEventListener('click', function() {
                filterModal.classList.remove('hidden');
                document.body.style.overflow = 'hidden'; // 防止背景滚动
            });
            
            // 关闭筛选弹出框
            closeFilterBtn.addEventListener('click', function() {
                filterModal.classList.add('hidden');
                document.body.style.overflow = '';
            });
            
            // 点击弹出框外部关闭
            filterModal.addEventListener('click', function(e) {
                if (e.target === filterModal) {
                    filterModal.classList.add('hidden');
                    document.body.style.overflow = '';
                }
            });
            
            // 应用筛选按钮
            applyFilterBtn.addEventListener('click', function() {
                filterModal.classList.add('hidden');
                document.body.style.overflow = '';
                // 这里可以添加应用筛选的逻辑
            });
            
            // 专利项点击事件 - 显示详情
            patentItems.forEach(function(item, index) {
                item.addEventListener('click', function(e) {
                    // 如果点击的是复选框，不触发详情显示
                    if (e.target.type === 'checkbox' || e.target.closest('.patent-checkbox')) {
                        return;
                    }
                    
                    // 移除所有专利项的选中样式
                    patentItems.forEach(function(pi) {
                        pi.classList.remove('patent-selected');
                    });
                    
                    // 添加当前专利项的选中样式
                    item.classList.add('patent-selected');
                    
                    // 隐藏所有专利详情
                    patentDetails.forEach(function(detail) {
                        detail.classList.add('hidden');
                    });
                    
                    // 显示对应的专利详情
                    const detailId = `patent-detail-${index + 1}`;
                    const detailElement = document.getElementById(detailId);
                    if (detailElement) {
                        detailElement.classList.remove('hidden');
                    }
                    
                    // 确保详情区域显示
                    detailSection.classList.remove('hidden');
                });
            });
            
            // 专利复选框选择
            let selectedCount = 0;
            function updateSelectedCount() {
                selectedCount = Array.from(patentCheckboxes).filter(checkbox => checkbox.checked).length;
                selectedCountSpan.textContent = selectedCount;
            }
            // 初始化
            updateSelectedCount();

            patentCheckboxes.forEach(function(checkbox) {
                checkbox.addEventListener('change', function() {
                    updateSelectedCount();
                    
                    // 检查是否所有复选框都被选中
                    const allChecked = Array.from(patentCheckboxes).every(cb => cb.checked);
                    selectAllCheckbox.checked = allChecked;
                });
            });
            
            // 全选复选框
            selectAllCheckbox.addEventListener('change', function() {
                const isChecked = selectAllCheckbox.checked;
                
                patentCheckboxes.forEach(function(checkbox) {
                    checkbox.checked = isChecked;
                });
                
                updateSelectedCount();
            });
            
            // 比对分析按钮
            compareBtn.addEventListener('click', function() {
                if (selectedCount === 0) {
                    alert('请至少选择一项专利进行比对分析');
                    return;
                }

                // 弹出确认进行对比分析的对话框
                // const confirmResult = confirm('已选择3篇最接近现有技术，确认开始AI对比分析？');
                // if (!confirmResult) {
                //     return;
                // }

                // 新窗口打开compare.html, 并传递一个整数参数
                window.open('compare1.html', '_blank');
            });
            
            // 查看历史记录按钮点击事件
            viewHistoryBtn.addEventListener('click', function() {
                // 弹出compareModal
                 //compareModal.classList.remove('hidden');
                 window.open('compare1.html', '_blank');
            });
            
            // 中间分隔线拖动调整宽度
            let isResizing = false;
            
            resizer.addEventListener('mousedown', function(e) {
                isResizing = true;
                document.body.style.cursor = 'col-resize';
                document.addEventListener('mousemove', handleMouseMove);
                document.addEventListener('mouseup', function() {
                    isResizing = false;
                    document.body.style.cursor = '';
                    document.removeEventListener('mousemove', handleMouseMove);
                });
            });
            
            function handleMouseMove(e) {
                if (!isResizing) return;
                
                const container = document.querySelector('.flex-1.flex.overflow-hidden');
                const containerRect = container.getBoundingClientRect();
                const containerWidth = containerRect.width;
                
                // 计算左侧区域宽度百分比
                const leftWidthPercent = ((e.clientX - containerRect.left) / containerWidth) * 100;
                
                // 限制最小宽度
                if (leftWidthPercent < 30 || leftWidthPercent > 70) return;
                
                // 设置左右两侧区域宽度
                searchSection.style.width = `${leftWidthPercent}%`;
                detailSection.style.width = `${100 - leftWidthPercent}%`;
            }

          });
    </script>
</body>
</html>